<template>
  <div class="bg-white message-content">
    <FormTitle text="站点配置" class="content-title" />
    <div class="content mt-3">
      <BasicForm @register="registerForm">
        <template #f3="{ model, field }">
          <div class="box-ImagePreview">
            <div class="box-title">系统LOGO上传</div>
            <HUpload
              :show-file-name="false"
              :max-size="18"
              :dragger="false"
              show-upload-icon
              title="+点击上传"
              v-model:value="model[field]"
              @change="handleSumbit"
            >
              <template #tips>
                <div
                  class="tips-box"
                  title="支持JPG、PNG格式，单个文件不超过18M，最多 只能上传1张图片"
                >
                  <span>支持JPG、PNG格式，单个文件不超过18M，最多 只能上传1张图片</span>
                </div>
              </template>
            </HUpload>
          </div>
        </template>
        <template #f4="{ model, field }">
          <div class="box-ImagePreview">
            <div class="box-title">复合LOGO上传</div>
            <HUpload
              title="+点击上传"
              :max-size="18"
              :dragger="false"
              show-upload-icon
              :show-file-name="false"
              v-model:value="model[field]"
              @change="handleSumbit"
            >
              <template #tips>
                <div
                  class="tips-box"
                  title="支持JPG、PNG格式，单个文件不超过18M，最多 只能上传1张图片"
                >
                  <span>支持JPG、PNG格式，单个文件不超过18M，最多 只能上传1张图片</span>
                </div>
              </template>
            </HUpload>
          </div>
        </template>
        <template #f5="{ model, field }">
          <div class="box-ImagePreview">
            <div class="box-title">图标上传</div>
            <HUpload
              title="+点击上传"
              :max-size="18"
              :dragger="false"
              show-upload-icon
              :show-file-name="false"
              v-model:value="model[field]"
              @change="handleSumbit"
            >
              <template #tips>
                <div
                  class="tips-box"
                  title="支持JPG、PNG格式，单个文件不超过18M，最多 只能上传1张图片"
                >
                  <span>支持JPG、PNG格式，单个文件不超过18M，最多 只能上传1张图片</span>
                </div>
              </template>
            </HUpload>
          </div>
        </template>
      </BasicForm>
    </div>
    <FormTitle text="基本信息" class="content-title">
      <template #extra>
        <a-button type="link" v-if="!isUpdate" @click="editInfo">编辑信息</a-button>
        <a-button type="link" v-if="isUpdate" @click="handleEdit">确认修改</a-button>
        <a-button type="link" v-if="isUpdate" @click="handleBack">返回</a-button>
      </template>
    </FormTitle>
    <div class="content mt-3">
      <BasicForm @register="registerForms" />
    </div>
  </div>
</template>
<script lang="ts">
  import { comFileUploadRemindingApi } from '/@/api/config-center/model-design';

  import { HUpload } from '/@/components/Upload';
  import { uploadApi } from '/@/api/sys/upload';
  import { defineComponent, onMounted, ref, unref } from 'vue';

  import FormTitle from '/@/components/HFormTitle';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { columns2, columns, EmailFormSchema, FileServes, SystemResources } from './config.data';
  import {
    getConfigByKeyApi,
    saveThirdPartyConfigApi,
    saveSmsConfigApi,
    saveFilerServerConfigApi,
    saveEmailConfigApi,
    saveDingConfigApi,
    saveFilerServerConfigSystemApi,
  } from '/@/api/admin/tenant';

  const isUpdate = ref(false);

  const api = {
    TENANT_EMAIL_CONFIG: saveEmailConfigApi, // 邮件
    TENANT_DINGTALK_MSG_CONFIG: saveDingConfigApi, // 钉钉
    TENANT_SMS_CONFIG: saveSmsConfigApi, // 短信
    TENANT_WECHAT_CONFIG: () => {}, // 微信
    TENANT_THIRD_PARTY_CONFIG: saveThirdPartyConfigApi, // 第三方
    TENANT_FILE_SERVER_CONFIG: saveFilerServerConfigApi, // 文件服务
    TENANT_BASE_INFO_CONFIG: saveFilerServerConfigSystemApi, // 系统资源
  };

  export default defineComponent({
    name: 'TenantConfig',
    components: {
      // PageWrapper,
      // ImagePreview,
      // BasicUpload,
      FormTitle,
      BasicForm,
      HUpload,
    },
    setup() {
      const { prefixCls } = useDesign('tenant-config');
      const { createMessage } = useMessage();
      let result: any = null;
      // const formSchema
      const type = ref(columns2[1].value);
      const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm({
        layout: 'vertical',
        disabled: true,
        baseColProps: { lg: 8, md: 12, sm: 24 },
        schemas: SystemResources,
        showActionButtonGroup: false,
      });

      const [
        registerForms,
        { setFieldsValue: setFieldsValueInfo, validate: validateInfo, setProps: setPropsInfo },
      ] = useForm({
        layout: 'vertical',
        disabled: true,
        baseColProps: { span: 8 },
        schemas: [
          {
            field: 'title',
            label: '系统名称',
            component: 'Input',
            componentProps: {
              placeholder: '请输入系统名称',
            },
          },
        ],
        showActionButtonGroup: false,
        showAdvancedButton: false,
      });

      const changeType = async ({ value }) => {
        type.value = value;
        isUpdate.value = false;
        setProps({ disabled: false });
        let schemas: any[] = [];
        switch (value) {
          case 'TENANT_EMAIL_CONFIG':
            schemas = EmailFormSchema;
            break;
          case 'TENANT_BASE_INFO_CONFIG':
            schemas = SystemResources;
            break;
          case 'TENANT_SMS_CONFIG2':
            schemas = FileServes;
            break;
          default:
            break;
        }
        // resetSchema(schema);
        setProps({ schemas });
        await init(value);
      };

      onMounted(() => {
        changeType(columns2[1]);
      });

      const editInfo = () => {
        isUpdate.value = true;
        setPropsInfo({ disabled: !unref(isUpdate) });
      };

      async function init(value) {
        resetFields();
        const ret = await await getConfigByKeyApi(value);
        Object.keys(ret).forEach((e) => {
          if (e !== 'title' && ret[e]) {
            ret[e] = ret[e]?.url ? [ret[e]] : [];
          }
        });
        result = ret;
        setFieldsValueInfo({
          title: ret.title,
        });
        setFieldsValue(ret);
      }

      async function handleSumbit() {
        // 特殊处理url参数
        const values = await validate();
        const values2 = await validateInfo();
        const params = { ...values, ...values2 };
        Object.keys(params).forEach((e) => {
          if (e !== 'title' && params[e]) {
            params[e] = params[e]?.[0] || {};
          }
        });
        console.log(
          '%cparams===>72： ',
          'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
          params,
        );
        //

        await api[type.value](params);
        createMessage.success('操作成功');

        isUpdate.value = false;

        setPropsInfo({ disabled: true });
      }
      const handleEdit = () => {
        handleSumbit();
      };
      const handleBack = () => {
        isUpdate.value = false;
        setPropsInfo({ disabled: !unref(isUpdate) });
        setFieldsValueInfo({
          title: result.title,
        });
      };

      return {
        comFileUploadRemindingApi,
        uploadApi,
        handleChange: (list: string[]) => {
          createMessage.info(list?.length ? '上传成功' : '删除成功');
        },
        type,
        columns,
        prefixCls,
        registerForm,
        changeType,
        handleSumbit,
        editInfo,
        isUpdate,
        handleEdit,
        registerForms,
        handleBack,
      };
    },
  });
</script>
<style lang="less" scoped>
  .box-ImagePreview {
    position: relative;
    // display: flex;
    // align-items: center;
    background: rgba(43, 99, 161, 0.05);
    padding: 24px 32px 14px;
    border-radius: 8px;
    width: 522px;

    .box-title {
      margin-bottom: 24px;
      color: #333;
      font-weight: 500;
    }

    // :deep(& > div + div) {
    //   position: absolute;
    //   top: 50%;
    //   left: 100px;
    //   transform: translate(0, -50%);
    // }

    :deep(& .ant-image-img) {
      padding: 0.2rem;
      box-sizing: border-box;
      border: 1px solid rgb(196 188 188);
      width: 5rem !important;
      height: 5rem !important;
    }

    .tips-box {
      // display: table;
      // padding-bottom: 8px;
      margin-top: 6px;
      height: 100%;

      span {
        // display: table-cell;
        // vertical-align: bottom;
        color: #999999;
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  // :deep(.ant-space.ant-space-horizontal.ant-space-align-center div:nth-child(2)) {
  //   display: none !important;
  // }
</style>
<style lang="less">
  @prefix-cls: ~'@{namespace}-tenant-config';

  .message-content {
    width: calc(100% - 32px);
    height: calc(100vh - 128px);
    margin: auto;
    padding: 0 24px;

    .content-title {
      padding: 25px 0 8px;

      margin: auto;
      border-bottom: 1px solid #e9e9e9;
    }
  }
  .@{prefix-cls} {
    // background-color: @background-color-light;
    .vben-basic-form {
      &[disabled='true'] {
        .ant-form-item-label {
          label {
            color: @text-color-call-out;
          }
        }
      }

      .ant-input-number-disabled,
      .ant-input-affix-wrapper-disabled {
        // background-color: transparent;
        color: #333;

        > .ant-input[disabled] {
          color: #333;
        }
      }
    }
  }
</style>
